import Taro, {Component} from '@tarojs/taro'
import {View, Image, Text, Form, Input, Button} from '@tarojs/components'
import {observer, inject} from '@tarojs/mobx'
import {IStoreProps} from '../../store/Stores'
import { AtCurtain, AtButton } from 'taro-ui'
import {
  getAvatar,
  companyName,
  phonePartOf,
  servicePhone,
  makePhoneCall,
  navigateTo,
  showModel,
  userInfoInterface, getUserInfo, setUserInfo, showToast, isPhone
} from '../../utils/common'
import FooterInfo from "../../components/FooterInfo";
import FooterMenu from "../../components/FooterMenu";

import './mine.scss'
import icon_22 from '../../assets/img/icon_22.png'
import bg_04 from '../../assets/img/bg_04.png'
import icon_15 from '../../assets/img/icon_16.png'
import icon_16 from '../../assets/img/icon_15.png'
import icon_09 from '../../assets/img/icon_09.png'
import nav_01 from "../../assets/img/icon_10.png";
import nav_02 from "../../assets/img/icon_12.png";
import nav_03 from "../../assets/img/icon_13.png";
import nav_04 from "../../assets/img/icon_14.png";
import bg_05 from "../../assets/img/bg_05.png";

interface IHomeProps extends IStoreProps {
}

@inject("stores")
@observer
class Mine extends Component<IHomeProps> {
  state = {
    nav: [
      {title: '银行卡', url: '/pages/mine/bank', icon: nav_01},
      {title: '收货地址', url: '/pages/mine/address', icon: nav_02},
      {title: '帮助中心', url: '/pages/mine/help', icon: nav_03},
      {title: '关于我们', url: '/pages/mine/setting', icon: nav_04}
    ],
    userInfo: {} as userInfoInterface,
    isLogin: false,
    isOpened: false
  }

  componentWillMount() {
    let isLogin = Object.keys(getUserInfo()).length > 0
    this.setState({userInfo: getUserInfo(), isLogin})
  }

  componentDidShow(): void {
  }

  link = (url: string) => {
    if (url.includes('http')) {
      window.location.href = url
    } else {
      navigateTo(url)
    }
  }

  makePhone = () => {
    makePhoneCall()
  }

  logOut = () => {
    Taro.removeStorageSync('user')
    this.setState({isLogin: false})
    showToast('缓存清除成功~')
    // setTimeout(() => { navigateTo('/pages/index/index') }, 2000)
  }

  onClose = () => {
    this.setState({ isOpened: false })
  }

  changeIsopen = () => {
    this.setState({ isOpened: !this.state.isOpened })
  }

  bindSourceUserId(e) {
    let { phoneNumber } = e.detail.value
    if(!phoneNumber) { showToast('请输入邀请人手机号码~'); return }
    if(!isPhone(phoneNumber)){ showToast('请输入正确的手机号码~'); return }
    // if(userInfo && userInfo.sourceUserId) { showToast('您已经绑定过邀请人手机号了,不能重复绑定~'); return; }
    let { userStore } = this.props.stores
    userStore.bindingSourceUser({
      phoneNumber,
      callback: () => {
        showToast('绑定邀请人号码成功~')
        this.setState({ isOpened: false })
      }
    })
  }

  render() {
    const {isLogin, nav, userInfo, isOpened} = this.state
    return (
      <View className='mine page-bg'>
        <View className='mine-index__header'>
          <Image className='mine-index__bg' src={bg_04} />
          <Image className='mine-index__avatar' src={getAvatar(userInfo.avatar)}/>
          {
            !isLogin &&
            <View className='mine-index_info'>
                <View className='mine-index__btn-login' onClick={this.link.bind(this, '/pages/index/index')}>
                    立即登录
                </View>
                <View className='mine-index__hello'>Hello， 欢迎来到{companyName}!</View>
            </View>
          }
          {
            isLogin &&
            <View className='mine-index_info'>
                <View className='mine-index_username fw'>{userInfo.nickName}
                   {/*  <Text className='mine-index_leval'>{userInfo.graName || '游客'}</Text> */}
                  </View>
              {
                !userInfo.userPhone && <View className='mine-index_phone'
                                             onClick={this.link.bind(this, '/pages/mine/editPhone?codeState=0')}>绑定手机</View>
              }
              {
                userInfo.userPhone && <View className='mine-index_phone'>{phonePartOf(userInfo.userPhone || '')}</View>
              }
            </View>
          }
          {
            isLogin &&
            <Image className='mine-index__code' src={icon_22} onClick={this.link.bind(this, '/pages/share/index')}/>
          }
        </View>
        {
          !isLogin &&
          <View>
              <View className='mine-pt'>
                  <View className='mine-pt__item'>
                      <Image className='mine-pt__icon' src={icon_15}/>
                      <View className='mine-pt__info'>
                          <View className='mine-pt__money yuan'>0</View>
                          <View className='mine-pt__title'>我的收益</View>
                      </View>
                      <Image className='mine-pt__link' src={icon_09}/>
                  </View>

                  <View className='mine-pt__item'>
                      <Image className='mine-pt__icon' src={icon_16}/>
                      <View className='mine-pt__info'>
                          <View className='mine-pt__money'>0</View>
                          <View className='mine-pt__title'>我的团队</View>
                      </View>
                      <Image className='mine-pt__link' src={icon_09}/>
                  </View>
              </View>

              <View className='content-20'>
                  <View className='line-common__wrap'>
                      <View className='line-common'>
                          <View className='line-common__title'>我的鱼塘</View>
                          <View className='line-common__desc icon-link-theme'>0</View>
                      </View>
                      <View className='line-common'>
                          <View className='line-common__title'>绑定手机号</View>
                          <View className='line-common__desc icon-link-theme'>立即绑定</View>
                      </View>

                    {/* <View className='line-common'>
              <View className='line-common__title'>实名认证</View>
              <View className='line-common__desc icon-link-theme'>已认证</View>
            </View>
            <View className='line-common'>
              <View className='line-common__title'>实名认证</View>
              <View className='line-common__desc icon-link-theme color-orange'>未认证</View>
            </View>*/}
                  </View>
                {/* <View className='interval' />
          <View className='mine-upgrade' >
            <Image className='mine-upgrade__bg' src={bg_05} onClick={this.link.bind(this, '/pages/mine/upgrade')} />
            <View className='mine-upgrade__info'>
              <View className='mine-upgrade__title'>初级联合养鱼</View>
              <View className='mine-upgrade__desc'>开通联合养鱼专享尊贵特权！</View>
            </View>
            <View className='mine-upgrade__btn'>立即开通</View>
          </View>*/}
                   <View className='interval' />
                  <View className='index-nav mine-index-nav mine-nav'>
                    {
                      nav.map((item, index) => {
                        return (
                          <View className='index-nav__item'>
                            <Image className={'index-nav__icon index-nav__icon' + index} src={item.icon}/>
                            <Text className='index-nav__title'>{item.title}</Text>
                          </View>
                        )
                      })
                    }
                  </View>
                  <View className='interval' />

                  <View className='line-common__wrap'>
                      <View className='line-common' onClick={this.makePhone.bind(this)}>
                          <View className='line-common__title'>客服热线</View>
                          <View className='line-common__desc icon-link-theme'>{servicePhone}</View>
                      </View>
                    {/* <View className='line-common'>
              <View className='line-common__title'>设置</View>
              <View className='line-common__desc icon-link-theme' />
            </View>*/}
                  </View>
                  <View className='interval' />
                  <View className='line-common__wrap' onClick={this.logOut.bind(this)}>

                      <View className='line-common'>
                          <View className='line-common__title color-theme'
                                style={{width: '100%', textAlign: 'center'}}>清除缓存</View>
                      </View>
                  </View>
              </View>
          </View>
        }
        {
          isLogin &&
          <View>
              <View className='mine-pt'>
                  <View className='mine-pt__item' onClick={this.link.bind(this, '/pages/mine/profit')}>
                      <Image className='mine-pt__icon' src={icon_15}/>
                      <View className='mine-pt__info'>
                          <View className='mine-pt__money yuan'>{(userInfo.account || 0).toFixed(2)}</View>
                          <View className='mine-pt__title'>我的收益</View>
                      </View>
                      <Image className='mine-pt__link' src={icon_09} />
                  </View>

                  <View className='mine-pt__item' onClick={this.link.bind(this, '/pages/mine/team')}>
                      <Image className='mine-pt__icon' src={icon_16} />
                      <View className='mine-pt__info'>
                          <View className='mine-pt__money'>{userInfo.teamNum || 0}</View>
                          <View className='mine-pt__title'>我的团队</View>
                      </View>
                      <Image className='mine-pt__link' src={icon_09} />
                  </View>
              </View>

              <View className='content-20'>
                  <View className='line-common__wrap'>
                      <View className='line-common' onClick={this.link.bind(this, '/pages/mine/fish')}>
                          <View className='line-common__title'>我的鱼塘</View>
                          <View className='line-common__desc icon-link-theme'>{userInfo.orderNum || 0}</View>
                      </View>
                    {
                      !userInfo.userPhone &&
                      <View className='line-common' onClick={this.link.bind(this, '/pages/mine/editPhone?codeState=0')}>
                          <View className='line-common__title'>绑定手机号</View>
                          <View className='line-common__desc icon-link-theme'>立即绑定</View>
                      </View>
                    }
                    {
                      userInfo.userPhone &&
                      <View className='line-common' onClick={this.link.bind(this, '/pages/mine/editPhone?codeState=1')}>
                          <View className='line-common__title'>更换手机号</View>
                          <View className='line-common__desc icon-link-theme'>{phonePartOf(userInfo.userPhone)}</View>
                      </View>
                    }
                    {/* <View className='line-common'>
              <View className='line-common__title'>实名认证</View>
              <View className='line-common__desc icon-link-theme'>已认证</View>
            </View>
            <View className='line-common'>
              <View className='line-common__title'>实名认证</View>
              <View className='line-common__desc icon-link-theme color-orange'>未认证</View>
            </View>*/}
                  </View>
                {/* <View className='interval' />
          <View className='mine-upgrade' >
            <Image className='mine-upgrade__bg' src={bg_05} onClick={this.link.bind(this, '/pages/mine/upgrade')} />
            <View className='mine-upgrade__info'>
              <View className='mine-upgrade__title'>初级联合养鱼</View>
              <View className='mine-upgrade__desc'>开通联合养鱼专享尊贵特权！</View>
            </View>
            <View className='mine-upgrade__btn'>立即开通</View>
          </View>*/}
                  <View className='interval' />
                  <View className='index-nav mine-index-nav mine-nav'>
                    {
                      nav.map((item, index) => {
                        return (
                          <View className='index-nav__item' onClick={this.link.bind(this, item.url)}>
                            <Image className={'index-nav__icon index-nav__icon' + index} src={item.icon}/>
                            <Text className='index-nav__title'>{item.title}</Text>
                          </View>
                        )
                      })
                    }
                  </View>
                  <View className='interval' />

                  <View className='line-common__wrap'>
                    {
                      userInfo.sourceUserId === '00000000-0000-0000-0000-000000000000'&&
                      <View className='line-common' onClick={this.changeIsopen.bind(this)}>
                          <View className='line-common__title'>绑定邀请人</View>
                          <View className='line-common__desc icon-link-theme' />
                      </View>
                    }

                      <View className='line-common' onClick={this.makePhone.bind(this)}>
                          <View className='line-common__title'>客服热线</View>
                          <View className='line-common__desc icon-link-theme'>{servicePhone}</View>
                      </View>
                  </View>
                  <View className='interval' />
                  <View className='line-common__wrap' onClick={this.logOut.bind(this)}>
                      <View className='line-common'>
                          <View className='line-common__title color-theme'
                                style={{width: '100%', textAlign: 'center'}}>清除缓存</View>
                      </View>
                  </View>
              </View>
          </View>
        }

        <AtCurtain
          isOpened={isOpened}
          onClose={this.onClose.bind(this)}
        >
          <View className='form-wrap content-30 mine-form' >
            <Form onSubmit={this.bindSourceUserId.bind(this)}>
              <View className='form-wrap__group'>
                <View className='form-wrap__title'>邀请人</View>
                <View className='form-wrap__content'>
                  <Input className='form-wrap__input' name='phoneNumber' placeholderClass='placeholder-class' placeholder='请输入邀请人手机号码' />
                </View>
              </View>
              <Button className='circular-submit' formType='submit'>立即绑定</Button>
            </Form>
          </View>
        </AtCurtain>

        <FooterInfo />
        <View className='footer-block' />
        <FooterMenu menu='mine' />
      </View>
    )
  }
}

export default Mine
